<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{}
        body{

            margin: 0px;
        }
        .one{
            width: 50px;
            height: 50px;
            padding: 50px;
            border: 10px solid peru;
            margin: 0px;
            background-color: red;
            overflow: hidden;
        }
        .two{
            /*padding 可以直接写4个方向的距离
            4个: 上 右  下  左
            3个: 上  右  下  左没写  会与右保持一致
            2个: 上  右   左与右一致  下与上一致
            */
            padding-top: 10px;
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 40px;
            background-color: #F00;
            padding: 10px 20px 30px 40px;
        }
        .three{
            width: 50px;
            background-color: aqua;
            /*如果想要覆盖切记 用小属性 去叠大属性*/
            padding: 10px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<!--什么标签是盒子
所有里面能放东西的标签 都是盒子
比如 div,span,a
比如img 表单 .. 就不是盒子
一个盒子主要由4部分组成:
内容: 设置的宽高  就是内容的宽高
padding:内容到边框的距离
border: 边框的粗细
margin:从边框以外多少地方不能有其他元素
-->
<div class="one">
    打工合法化房间很干净
</div>
<div class="three">
    <img src="http://placekitten.com/50/50" alt="">
</div>
<ul>
    <li>A</li>
<li>B</li>
    <li>C</li>
</ul>
</body>
</html>